<template>
    <div>
        <product-bar-header :title="title"/>
        <div class="content">
            <div class="product-cell" v-for="(item,index) of list" :key="index" @click="click(item)">
                <i class="el-icon-arrow-right"></i>
                <span>{{item.title||'暂无'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import ProductBarHeader from "@/components/product-bar/product-bar-header";

    export default {
        name: "product-bar",
        components: {ProductBarHeader},
        props: {
            list: {
                type: Array,
                default: () => []
            },
            title: {
                type: String,
                defaultL: () => '新品展示'
            },
        },
        methods: {
            click(item) {
                this.$emit('itemClick', item)
            }
        }
    }
</script>

<style scoped>

    .content {
        margin-top: 6px;
    }

    .product-cell {

        border-bottom: 1px #6d6d6d dashed;
        height: 32px;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        padding: 6px 3px;
        cursor: pointer;
    }

    .product-cell span:hover {
        text-decoration: underline;
    }
</style>